<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-20 19:27:43
 * @Description  : 激活码添加或者修改面板
-->
<template>
  <div class="bg-lightColor activeCode-edit-con p-3 text-[13px]">
    <n-grid x-gap="12" :cols="1" class="mb-2">
      <n-gi>
        <n-button
          type="primary"
          size="small"
          class="!text-[13px]"
          @click="backView"
        >
          <div class="mr-2 rotate-90 transform">
            <SvgIcon icon="xiala" color="#fff" size="10px"></SvgIcon>
          </div>
          返回
        </n-button>
      </n-gi>
    </n-grid>
    <n-divider class="!my-2" />
    <n-form
      ref="activeCodeFormRef"
      :label-width="isSmall ? 100 : 120"
      label-placement="left"
      :label-align="isSmall ? 'left' : 'right'"
      :model="activeCode"
      size="small"
      require-mark-placement="right"
      :rules="formRule"
    >
      <n-form-item label="所属科目：" path="examId">
        <ExamSelect
          class="!w-[300px]"
          :multiple="false"
          :default-exam-id="activeCode.examId"
          @change-value="(value: any) => (activeCode.examId = value)"
        ></ExamSelect>
      </n-form-item>
      <n-form-item label=" " v-permission="['admin']">
        <n-button
          type="primary"
          class="grent-btn w-[120px]"
          @click="handleSave(false)"
        >
          保存
        </n-button>
        <n-button
          v-if="!isModify"
          type="primary"
          class="grent-btn w-[120px] ml-2"
          @click="handleSave(true)"
        >
          保存并新增
        </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import type { ActiveCodeRes, ActiveCodeUpdateReq } from '@/types/activeCode'
import { userMenuShow } from '@/hooks/useMenuShow'
const { isSmall } = userMenuShow()

const props = defineProps<{
  isModify: boolean
  activeCodeRes?: ActiveCodeRes
}>()

const emits = defineEmits<{
  (e: 'backView'): void
  (
    e: 'changeActiveCode',
    type: number,
    data: ActiveCodeUpdateReq,
    addNew: boolean
  ): void
}>()
const backView = () => {
  emits('backView')
}

const activeCode = reactive<ActiveCodeUpdateReq>({
  examId: ''
})

const initActiveCode = () => {
  if (props.isModify) {
    const { examId, id } = props.activeCodeRes as ActiveCodeRes
    activeCode.activeCodeId = id
    activeCode.examId = examId
  }
}

onMounted(() => {
  initActiveCode()
})

const formRule = {
  examId: [
    {
      required: true,
      message: '请选择科目ID',
      trigger: ['blur']
    }
  ]
}

const activeCodeFormRef = ref<FormInst | null>(null)

const handleSave = (addNew: boolean) => {
  activeCodeFormRef.value?.validate((error: any) => {
    if (error) {
      return
    }

    if (props.isModify) {
      emits('changeActiveCode', 1, activeCode, addNew)
    } else {
      emits('changeActiveCode', 0, activeCode, addNew)
    }
  })
}
</script>

<style scoped lang="scss"></style>
